import React, { memo } from "react";
import { Link } from "react-router-dom";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import cs from "classnames";
import sty from "./sty.module.css";
import { getSongDetail } from "@/pages/player/store/actionCreator";
import { getSizeImage, getDownLoadUrl } from "@/utils/format-utils";

import { Collapse } from "antd";

const { Panel } = Collapse;
const SongInfo = (props) => {
  const dispatch = useDispatch();
  const { commentTotal } = useSelector((state) => {
    return {
      commentTotal: state.getIn(["song", "commentTotal"]),
    };
  }, shallowEqual);
  const { songDetail, lyric } = props;
  if (!songDetail.songName) {
    return null;
  }
  const { pirUrl, songName, singer, id } = songDetail;
  const playMsuic = () => {
    dispatch(getSongDetail(id));
    document.getElementById("audio").play();
  };

  return (
    <div className="flex1">
      <div className={sty.cover}>
        <img src={getSizeImage(pirUrl, 130)} alt="" />
        <div className={cs(sty.bgCover, "image_cover")}></div>
      </div>
      <div className={sty.right}>
        <div className={sty.titleWrap}>
          <i className={cs("sprite_icon2", sty.tag)}></i>
          <h2 className={cs("txt1", sty.songName)}>{songName}</h2>
          <em className={cs("sprite_icon2", sty.mv)}></em>
        </div>
        {/* *************************** */}
        <div className={sty.singer}>
          歌手:<Link to="">{singer}</Link>
        </div>
        <div className={sty.singer}>
          所属专辑:
          <Link to="" className="no-link">
            {singer}
          </Link>
        </div>
        <div className={cs(sty.controls, "sprite_button")}>
          <div className={cs("sprite_button", sty.play)} onClick={playMsuic}>
            <i className="sprite_button inner">
              <em className="sprite_button"></em>
              播放
            </i>
          </div>
          <div
            className="sprite_button download pointer"
            onClick={() => {
              console.log("6");
              window.open(getDownLoadUrl(id));
            }}
          >
            <i className="sprite_button inner">
              <em className="sprite_button  favorite-icon"></em>
              下载
            </i>
          </div>
          <div className={cs("sprite_button", sty.comment, "comment")}>
            <i className="sprite_button inner">
              <em className="sprite_button"></em>
              {commentTotal}
            </i>
          </div>
        </div>
        <Collapse>
          <Panel header={"歌词展示"}>
            {!!lyric.length &&
              lyric.map((v) => (
                <div key={v.totalTime} className={sty.lyrItem}>
                  {v.content}
                </div>
              ))}
          </Panel>
        </Collapse>
      </div>
    </div>
  );
};

export default memo(SongInfo);
